<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
    <title>My JSP 'index.jsp' starting page</title>
    <link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css">
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript" src="static/js/bootstrap.min.js"></script>
</head>

<body>
<div class="jumbotron" style="margin:0">
    <div class="container">
        <p>Welcome Dirary Website</p>
    </div>
</div>

<div class="alert alert-success alert-dismissible fade in" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
    </button>
    <strong> UserName !</strong> 欢迎登录九宫格日记网
</div>

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">九宫格日记网</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">

            </ul>

            <!--<ul class="nav navbar-nav navbar-right">-->
            <!--<li class="dropdown">-->
            <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"-->
            <!--aria-expanded="false">UserName<span class="caret"></span></a>-->
            <!--<ul class="dropdown-menu">-->
            <!--<li><a href="#">我的日记</a></li>-->
            <!--<li><a href="#">我的资料</a></li>-->
            <!--<li role="separator" class="divider"></li>-->
            <!--<li><a href="#">退出登录</a></li>-->
            <!--</ul>-->
            <!--</li>-->
            <!--</ul>-->
            <!--<div class="navbar-form navbar-right">-->
            <!--<a type="button" class="btn btn-success">新建日记</a>-->
            <!--</div>-->

            <div class="navbar-form navbar-right">
                <a type="button" class="btn btn-primary">登录</a>
                <a type="button" class="btn btn-info">注册</a>
            </div>
        </div>
    </div>
</nav>

<div class="container">
    <div class="panel panel-success">
        <div class="panel-heading">日记标题</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-xs-6 col-md-12">
                    <img class="img-thumbnail clickimg" style="cursor: pointer" tag="0" src="icon.png" width="60"
                         height="60" alt="">
                </div>
            </div>
            <blockquote class="blockquote-reverse" style="margin: 0">
                <footer>2018/01/01 <cite title="Source Title">UserName</cite></footer>
            </blockquote>
        </div>
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading">日记标题</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-xs-6 col-md-12">
                    <img class="img-thumbnail clickimg" style="cursor: pointer" tag="0" src="1.jpg" width="60"
                         height="60" alt="">
                </div>
            </div>
            <blockquote class="blockquote-reverse" style="margin: 0">
                <footer>2018/01/01 <cite title="Source Title">UserName</cite></footer>
            </blockquote>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">日记标题</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-xs-6 col-md-12">
                    <img class="img-thumbnail clickimg" style="cursor: pointer" tag="0" src="3.jpg" width="60"
                         height="60" alt="">
                </div>
            </div>
            <blockquote class="blockquote-reverse" style="margin: 0">
                <footer>2018/01/01 <cite title="Source Title">UserName</cite></footer>
            </blockquote>
        </div>
    </div>
</div>

<nav aria-label="Page navigation" class="text-center">
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

            </div>
            <div class="modal-body">
                <img id="modalimg" src="icon.png" alt="" style="width:100%;">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->

</div>
<script>
    $(".clickimg").click(function () {
        $("#modalimg").attr('src', $(this).attr('src'))
        $("#myModal").modal('show')
    })
</script>
</body>
</html>